<template>
	<view class="shop" style="padding-bottom:50rpx ;">
		<f-navbar title=" " fontColor="#303133" transparentTitleColor="#fff" bgColor="#fff" :scrollTop="scrollTop"
			navbarType='5'></f-navbar>
		<view class="u-demo-block">
			<u-swiper :list="bannerList" @change="(e) => (currentNum = e.current)" height="712rpx" :autoplay="false"
				indicatorStyle="right: 32rpx;bottom: 140rpx;">
			</u-swiper>
			<view class="backBox" :style="'top: '+$safeT+'px'">
				<!-- <image src="/static/index/back.png" mode="" @click="$back"></image> -->
			</view>
			<view class="mybox flex">
				<view class="statusBox" v-if="info.trade_day">
					<image src="/static/naozhong.png" mode=""></image>
					<text class="text1"></text>
					<text>营业时间: {{info.trade_day}}</text>
				</view>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ currentNum  }}/{{ bannerList.length }}</text>
				</view>
			</view>
		</view>
		<!-- <view class="tabbox u-m-t-10 flex">
			<view class="tabbox_item flex" @click="choosetype(index)" :class="current==index?'act':''"
				v-for="(i,index) in list1">
				{{i.name}}
				<view class="line" v-if="current==index">

				</view>
			</view>
		</view> -->
		<u-tabs class=" u-m-t-10" :list="list1" @click="choosetype" lineColor="#00CE9B" :scrollable="false"></u-tabs>
		<view class="contentbox" v-if="current==4">
			<view class="titlebox flex">
				<view class="titlebox_left flex">
					<image :src="$oss(info.logo_image)" mode=""></image>
					<view class="titlebox_left_text flex ">
						<text class="u-font-bold white u-font-32">{{info.name}}</text>
						<!-- <text class="u-font-24 white">此店铺还没有填写简介...</text> -->
					</view>
				</view>
				<!-- <view class="titlebox_right flex">
					<text style="color: #FE6051;" class="u-font-36 u-font-bold">5.0</text>
					<view class="flex">
						<text class="u-font-20">评价</text>
						<u-icon name='play-right-fill'></u-icon>
					</view>
				</view> -->
			</view>

			<view class="shopaddress u-m-tb-20">
				<view class="u-font-bold u-font-30 u-m-tb-20" style="margin: 20rpx 0; font-weight: bold;">店铺地址</view>
				<view class="shopaddress_box flex u-m-tb-20">
					<view class="shopaddress_box_left flex">
						<text>{{info.address}}</text>
						<text style="color: #959AAC;" class="u-font-24 u-m-t-20">距您 {{info.distance}}km</text>
					</view>
					<view class="shopaddress_box_right flex">

						<view class="toaddress flex" @click="openMap">
							<image src="../../static/pages_technician/address.png" mode=""></image>
							<text>导航</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="items" v-if="current==0">
			<view class="item" v-for="item in info.cate" @click="toDetails(item.id)">
				<!-- <image class="fengmian" :src="$oss(item.image)" mode="aspectFill"></image> -->
				<u--image class="fengmian" :fade="true" :src="$oss(item.image)" width="200rpx"
					height="160rpx"></u--image>
				<view class="right">
					<view class="name">{{item.name}}</view>
					<view class="gongneng">
						<view class="info">{{item.intro}}</view>
					</view>
					<view class="price">
						<!-- <view class="money">
							<text>¥</text>
							<text>{{item.price}}</text>
						</view> -->
						<view class="vipPrice">
							<image src="../../static/vipBg.png" class="vip" mode=""></image>
							<view class="word">¥ {{item.price}}</view>
						</view>
						<view class="reservation_btn" @click.stop="toskill(item.id)">立即预约</view>
					</view>
					<view class="naozhong">
						<image src="/static/naozhong.png" class="icon"></image>
						<text>{{item.costmin}}分钟</text>
					</view>
				</view>

			</view>
			<u-empty mode="list" v-if="finish && list.length === 0" style="margin-top: 200rpx;" icon="/static/none.png">
			</u-empty>
		</view>
		<view class="couponitems" v-if="current==2">
			<view class="item" v-for="item in coupon" :key="item.id">
				<view class="top">
					<view class="price">
						<text class="fuhao">￥</text>
						<text>{{item.reduce}}</text>
					</view>
					<view class="name_box">
						<text class="name">满{{item.achieve}}元可用</text>
						<text v-if="item.cname">此优惠券仅限{{item.cname}}项目使用</text>
					</view>
				</view>
				<view class="bottom">
					<view class="">有效期至 {{$u.timeFormat(item.exittime, 'yyyy.mm.dd hh:MM')}}</view>
					<view class="btn" v-if="item.userStatus == 0" @click="accept(item.id)">立即领取</view>
					<view class="btn" v-else @click="use">立即使用</view>
				</view>
			</view>
			<u-empty mode="list" v-if="coupon.length === 0" style="margin-top: 200rpx;" icon="/static/none.png">
			</u-empty>
		</view>
		<view class="flex" v-if="boxtype==3 && current==1"
			style="flex-direction: row; align-items: center; justify-content: space-between;; flex-wrap: wrap;padding: 0 24rpx;">
			<template v-for="(item) in list">
				<newskill-box :item="item" @detail="detail"></newskill-box>
			</template>
		</view>
		<view v-for="(item) in list" v-else-if="current == 1">
			<skill-box :type='boxtype' :item="item" @detail="detail"></skill-box>
		</view>
		<view class="titles" v-if="current==4">店铺营业执照</view>
		<view class="zhizhao" v-if="current==4">
			<image :src="info.image" mode="widthFix"></image>
			<view class="cover"></view>
		</view>
		<zmm-watermark v-if='current==4' :watermark="watermark"></zmm-watermark>
		<view class="evaluate" v-if="current==3">
			<view class="title">用户真实评价</view>
			<image class="icon_star" src="../../static/pages_technician/icon_star.png" mode=""></image>
			<view class="box1">
				<view class="box2" v-for="(item,index) of info.comment" v-if="index < 10">
					<view class="line1">
						<text>匿名用户</text>
						<view class="stars">
							<image v-for="i in item.star" src="../../static/pages_technician/starA.png" mode=""></image>
							<image v-for="i in (5 - item.star)" src="../../static/pages_technician/star.png" mode="">
							</image>
						</view>
					</view>
					<view class="line2">{{item.createtime | date}}</view>
					<view class="line3">{{item.content}}</view>
					<view class="line4">
						<!-- <view class="btn" v-for="(val) of item.label_content">{{val}}</view> -->
						<view class="btn">
							{{item.label_content}}
						</view>
					</view>
				</view>
				<view class="box3" v-if="info.comment.length == 10" @click="allEvaluate">
					<text>查看所有评价</text>
					<image src="../../static/pages_technician/right_grey.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import zmmWatermark from '@/components/zmm-watermark/components/zmm-watermark/zmm-watermark'
	import skillBox from '@/components/skillBox/skillBox'
	import newskillBox from '@/components/newskillbox/newskillbox'
	import {
		mapActions,
		mapState
	} from 'vuex';

	export default {
		components: {
			skillBox,
			newskillBox,
			zmmWatermark
		},
		data() {
			return {
				boxtype: uni.getStorageSync('project').skillstyle || '',
				list: [],
				current: 0,
				latitude: '',
				// watermark: '<h5>一点到家</h5>',
				longitude: '',
				currentNum: 1,
				// config: this.$store.state.config,
				bannerList: [],
				list1: [{
					name: '店铺项目',
				}, {
					name: '技师',
				}, {
					name: '优惠券',
				}, {
					name: '用户评价',
				}, {
					name: '关于我们',
				}],
				info: {},
				jslist: [],
				scrollTop: 0,
				finish: '',
				page: 1,
				coupon: []
			};
		},
		computed: {
			config() {
				return this.$store.state.config
			},
			watermark(){
				return `<h5>${this.config.user_name}</h5>`
			}
		},
		onLoad(opt) {
			this.store_id = opt.store_id;
			this.getInfo()
			this.getCoupon()
			this.watermark = `<h5>${this.config.user_name}</h5>`
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if(this.current==1){
				this.more()
			}
			
		},
		methods: {
			accept(id){
				this.$api.post('/coupon', {
					type: 'accept',
					id: id
				}).then(res => {
					if (res.code == 1) {
						this.getCoupon()
					}
				}).catch((res) => {
				
				})
			},
			getCoupon() {
				console.log(11111111)
				this.$api.post('/storecoupon', {
					page: 1,
					store_id: this.store_id
				}).then(res => {
					if (res.code == 1) {
						this.coupon = this.list.concat(res.data)
					}
				}).catch((res) => {

				})
			},
			toskill(id) {
				uni.navigateTo({
					url: '/pages/selectTechnician/selectTechnician?id=' + id
				})
			},
			toDetails(id) {
				uni.navigateTo({
					url: '/pages_index/details/details?id=' + id
				})
			},
			allEvaluate() {
				uni.navigateTo({
					url: '/pages_technician/allEvaluate/allEvaluate?id=' + this.info.user_id + '&shop=1'
				})
			},
			openMap() {
				let lat = this.info.lat
				let lng = this.info.lng
				// #ifdef H5
				window.location.href =
					`https://m.amap.com/navi/?start=&dest=${lng},${lat}&destName=${this.info.address}&key=a102f9ec3687da9de23f1a19cbf95179`
				// #endif
				// #ifdef MP-WEIXIN
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lng),
					success: function() {

					}
				});
				// #endif
				// #ifdef APP
				let url = ''
				const thisVM = this
				if (plus.os.name == 'Android') {

					url =
						`androidamap://viewMap?sourceApplication=appname&poiname=${this.info.address}&lat=${lat}&lon=${lng}&dev=0`
					if (url) {
						url = encodeURI(url)
						plus.runtime.openURL(url, function(e) {
							plus.nativeUI.alert('本机未安装高德地图')
						})
					}
				} else {

					url =
						`iosamap://viewMap?sourceApplication=applicationName&poiname=${this.info.address}&lat=${lat}&lon=${lng}&dev=0`
					if (url) {
						url = encodeURI(url)
						plus.runtime.openURL(url, function(e) {
							plus.nativeUI.alert('本机未安装指定的地图应用')
						})
					}
				}
				// #endif
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages_technician/jsDetails/jsDetails?id=' + id
				});
			},
			more() {
				this.page++
				this.init();
			},
			init() {
				if (this.finish) {
					return
				}
				this.$api.post('/searchskill', {
					...this.location,
					page: this.page,
					name: this.name,
					gender: this.gender,
					is_free: this.is_free,
					store_id: this.store_id,
					is_free: '',
					gender: ''
				}).then(res => {

					this.list = this.list.concat(res.data)
					if (res.data.length === 0) {
						this.finish = true

					}
				})
			},
			async getInfo() {
				if (!this.$store.state.location) {
					await this.getLocation()
				}
				this.location = JSON.parse(JSON.stringify(this.$store.state.location))

				this.latitude = this.location.lat
				this.longitude = this.location.lng

				this.$api.post('/storeinfo', {
					store_id: this.store_id,
					lng: this.longitude,
					lat: this.latitude,
					is_free: ''
				}).then(res => {
					this.info = res.data;
					// this.jslist = res.data.skill
					this.info.images.map(item => {
						item = this.$oss(item)

						this.bannerList.push(item)
					})
				})
				this.init()
			},
			...mapActions(['getLocation']),
			choosetype(e) {

				this.current = e.index
				console.log(this.current)
			}
		}
	}
</script>
<style>

</style>

<style lang="scss">
	.couponitems {
		padding-top: 30rpx;

		.item {
			width: 686rpx;
			border-radius: 20rpx;
			background: #FBFBFE;
			box-sizing: border-box;
			margin: 30rpx auto 0;

			.top {
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 28rpx 32rpx;
				display: flex;
				align-items: center;
				background-color: #fff;

				.price {
					font-size: 80rpx;
					font-weight: 900;
					color: #E91919;
					padding-right: 50rpx;
					border-right: 1rpx solid #F2F2F2;

					.fuhao {
						font-size: 30rpx;
					}
				}

				.name_box {
					font-size: 22rpx;
					color: #8D93A5;
					display: flex;
					flex-direction: column;
					padding-left: 50rpx;
					line-height: 46rpx;

					.name {
						font-size: 30rpx;
						font-weight: 600;
						color: #1C274C;
					}
				}
			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 20rpx 32rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #8D93A5;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 140rpx;
					height: 50rpx;
					background: #00CE9B;
					border-radius: 28rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}

	.shop /deep/ .u-tabs__wrapper__nav__item {
		padding: 0;
	}

	.titles {
		padding: 10rpx 32rpx;
		font-weight: bold;
	}

	.items {
		padding-top: 30rpx;

		.item {
			width: 686rpx;
			padding: 30rpx 32rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			margin: 0 auto 30rpx;
			position: relative;

			.fengmian {
				width: 200rpx;
				height: 160rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			.right {
				.name {
					font-size: 30rpx;
					font-weight: 600;
					color: #1C274C;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 70%;
				}

				.gongneng {
					display: flex;
					align-items: center;
					margin: 15rpx 0 20rpx;

					.info {
						height: 40rpx;
						border-radius: 10rpx;
						opacity: 0.4;
						border: 1rpx solid #8D93A5;
						font-size: 20rpx;
						color: #1C274C;
						line-height: 40rpx;
						text-align: center;
						margin-right: 10rpx;
						padding: 0 10rpx;
						display: -webkit-box; /* 将容器作为弹性盒子 */
						-webkit-box-orient: vertical; /* 垂直排列盒子内容 */
						-webkit-line-clamp: 1; /* 设置最大行数为1行 */
						overflow: hidden; /* 隐藏溢出的内容 */
						text-overflow: ellipsis; /* 使用省略号代替溢出的内容 */
					}
				}

				.price {
					display: flex;
					align-items: center;
					width: 400rpx;
					position: relative;

					.money {
						margin-right: 15rpx;

						text:first-child {
							font-size: 24rpx;
							color: #E91919;
						}

						text:last-child {
							font-size: 28rpx;
							color: #E91919;
							font-weight: 600;
						}
					}

					.vipPrice {
						width: 127rpx;
						height: 35rpx;
						// background: url(/static/vipBg.png) no-repeat;
						// background-size: contain;
						font-size: 22rpx;
						font-weight: 900;
						color: #292439;
						position: relative;
						margin-right: 50rpx;

						.vip {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
						}

						.word {
							height: 100%;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							padding-right: 10rpx;
							box-sizing: border-box;
							position: relative;
							z-index: 10;
						}
					}

					.reservation_btn {
						width: 150rpx;
						height: 56rpx;
						background: #00CE9B;
						border-radius: 28rpx;
						font-size: 22rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						right: 0;
					}
				}

				.naozhong {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 22rpx;
					color: #00CE9B;
					width: 142rpx;
					height: 52rpx;
					background: rgba(0, 206, 155, .1);
					border-radius: 100rpx 0rpx 0rpx 100rpx;
					position: absolute;
					right: 0;
					top: 30rpx;

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	.u-demo-block {
		position: relative;

		.backBox {
			width: 750rpx;
			position: absolute;
			top: 108rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			box-sizing: border-box;

			.btn {
				width: 118rpx;
				height: 56rpx;
				background: #00CE9B;
				border-radius: 28rpx;
				text-align: center;
				line-height: 56rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.mybox {
			position: absolute;
			bottom: 28rpx;
			align-items: center;
			justify-content: space-between;
			width: 90%;
			padding: 0 30rpx;

			.indicator-num {
				padding: 2px 0;
				background-color: rgba(0, 0, 0, 0.35);
				border-radius: 100px;
				width: 35px;
				@include flex;
				bottom: 28rpx;
				justify-content: center;

				&__text {
					color: #ffffff;
					font-size: 12px;
				}
			}

			.statusBox {
				height: 75rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 20rpx;
				border: 2rpx solid #FFFFFF;
				left: 32rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #1C274C;
				padding: 0 32rpx;
				box-sizing: border-box;

				.text1 {
					color: #00CE9B;
					margin-right: 20rpx;
				}

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
			}
		}

	}

	.tabbox {
		background-color: white;
		justify-content: space-evenly;
		padding-bottom: 10rpx;
		padding-top: 20rpx;

		.tabbox_item {
			flex-direction: column;
			align-items: center;
			color: #ADB1BF;

			.line {
				margin-top: 20rpx;
				width: 60rpx;
				height: 10rpx;
				border-radius: 20rpx;
				background-color: $uni-primary;
			}
		}

		.act {
			color: #333333;
		}
	}

	.contentbox {
		padding: 30rpx;

		.titlebox {
			align-items: center;
			background-color: $uni-primary;
			border-radius: 30rpx;
			padding: 30rpx;
			justify-content: space-between;

			.titlebox_left {
				image {
					width: 95rpx;
					height: 95rpx;
					border: 10rpx solid #fff;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.titlebox_left_text {
					color: #fff;
					// justify-content: center;
					align-items: center;
					// flex-direction: column;
				}
			}

			.titlebox_right {
				background-color: #D9F8F0;
				flex-direction: column;
				align-items: center;
				border: 5rpx solid #fff;
				border-radius: 30rpx;
				padding: 30rpx 20rpx;
			}
		}

		.shopaddress {
			.shopaddress_box {
				border-radius: 30rpx;
				background-color: #fff;
				padding: 30rpx;
				align-items: center;
				justify-content: space-between;

				.shopaddress_box_left {
					flex-direction: column;
					justify-content: space-between;
				}

				.shopaddress_box_right {
					.toaddress {
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						image {
							min-width: 55rpx;
							min-height: 55rpx;
							max-width: 55rpx;
							max-height: 55rpx;
						}
					}
				}
			}
		}
	}

	.zhizhao {
		margin: 0rpx auto;
		width: 90vw;
		height: 429rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
		.cover{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 10;
		}
	}

	.evaluate {
		width: 686rpx;
		background: #FE6051;
		border-radius: 20rpx;
		margin: 30rpx auto;
		padding-top: 32rpx;
		box-sizing: border-box;
		position: relative;

		.title {
			font-size: 30rpx;
			color: #FFFFFF;
			margin-left: 32rpx;
			font-weight: bold;
		}

		.icon_star {
			width: 113rpx;
			height: 95rpx;
			position: absolute;
			top: 20rpx;
			right: 30rpx;
		}

		.box1 {
			width: 686rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-top: 30rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.btns {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.btn {
					width: 129rpx;
					height: 54rpx;
					background: #F6F7FB;
					border-radius: 20rpx;
					font-size: 24rpx;
					color: #727891;
					line-height: 54rpx;
					text-align: center;
					margin-top: 20rpx;
				}

				.act {
					background: #FE6051;
					color: #FFFFFF;
				}
			}

			.box2 {
				margin-top: 40rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #EBEBEB;

				.line1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: 600;
					color: #1C274C;

					.stars {
						display: flex;
						align-items: center;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
						}
					}
				}

				.line2 {
					font-size: 20rpx;
					color: #BABDC9;
					margin: 10rpx 0 15rpx;
				}

				.line3 {
					font-size: 26rpx;
					color: #1C274C;
					margin-bottom: 22rpx;
				}

				.line4 {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.btn {
						padding: 0 10rpx;
						height: 54rpx;
						background: #F6F7FB;
						border-radius: 20rpx;
						font-size: 24rpx;
						color: #727891;
						line-height: 54rpx;
						text-align: center;
						margin-right: 20rpx;
						margin-top: 20rpx;
					}
				}
			}

			.box3 {
				font-size: 24rpx;
				color: #ADB1BF;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 50rpx;
				margin-top: 30rpx;

				image {
					width: 9rpx;
					height: 14rpx;
					margin-left: 12rpx;
				}
			}
		}
	}
</style>